<template>
  <h5 class="alldiv ">
      <div v-for="(item,index) in texts" :key="index" class="dis" v-if="ps.model=='true'">
        {{item}}
      </div>
    <div v-for="(item,index) in texts" :key="index"  v-if="ps.model=='false'">
      {{item}}
    </div>
  </h5>
</template>
<!--使用帮助
  用于一次性滚动显示文字
  传入值:
    value:显示的文字 可空
    time:滚动的时间 可空默认100
    space:用于文字与文字间的间隔, 默认无
    model:可空 默认true,是否支持空格.不支持空格的情况下可以自由调节延时
-->
<script setup>
import {onMounted, ref} from "vue";
let text =ref("")
let texts=ref([]);
let ps=defineProps({
  value:{
    default:"这是一个滚动显示"
  },
  time:{
    default:100
  },
  space:{
    default:""
  },
  model:{
    default:"true"
  }
})

onMounted(()=>{
  setTimeout(()=>{

    let array=ps.value.split("")
    texts.value=[];
    for (let i = 0; i < array.length; i++) {
      setTimeout(()=>{
        texts.value.push(array[i] +ps.space);

      },ps.time*i+1);
    }
  },10)

})
</script>
<style scoped>
.dis{
  white-space: pre;
}

.alldiv{
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  white-space:pre-line;
}

</style>